<template>
  <div class="invoice-order-add">  
    <row title="公司名" >
        <input class="ipt" type="text" slot="rowRight" placeholder="请输入公司名" v-model="company">
    </row>
     <row title="公司地址">
        <input class="ipt" type="text" slot="rowRight" placeholder="请输入公司地址" v-model="companyAddress">
    </row>
    <row title="联系电话" >
        <input class="ipt" type="number" slot="rowRight" placeholder="请输入联系电话" v-model="mobile">
    </row>
    <row title="开户银行" >
        <input class="ipt" type="text" maxlength="19" slot="rowRight" placeholder="请输入开户银行" v-model="bank">
    </row>
    <row title="银行账号" >
        <input class="ipt" type="number" maxlength="19" slot="rowRight" placeholder="请输入银行账号" v-model="account">
    </row>
    <row title="纳税识别码" >
        <input class="ipt"  slot="rowRight" placeholder="请输入纳税识别码" v-model="tin">
    </row>
    <div class="invoice-photo">
        <div class="map-title">发票订单<span class="tips">(订单号/金额/时间)</span></div>
        <div :class="['invoice-order' , index%2==0?'invoice-active':'']" v-for="(item,index) in invoiceOrder" :key="index">
            <div class="invoice-number">{{item.orderSn}}</div>
            <div class="invoice-money">￥{{item.orderPrice}}</div>
            <div class="invoice-timer">{{item.addTime}}</div>
        </div>
    </div> 
    <div class="add-btn isbtn" @click="goChoose">
        选择订单 +
    </div>

    <div class="height120"></div>
    <div class="btn isbtn" @click="submit">提交申请</div>
  </div>

</template>

<script>
import api from '@/api/api.js' 
import row from '@/components/row'
import { Message } from 'element-ui'
export default { 
  components: {
      row
  },
  data () {
    return {
      invoiceOrder:this.$store.state.checkOrders,
      "company":"",
      "companyAddress":"",
      "mobile":"",
      "bank":"",
      "account":"", 
      "tin":""
    }
  },
  mounted () {
  },
  filters: {
     
  },
  activated(){
      this.invoiceOrder=this.$store.state.checkOrders;
  },
  beforeRouteEnter(to, from, next) {
   next(vm=>{          //  这里的vm指的就是vue实例，可以用来当做this使用  
      if(from.name=="MyInvoice"){
        vm.initPage();
      }
    })
  }, 
  methods: {
    submit(){
        if(!this.company){
            return  Message({
            message: "请填写公司名称",
            type: 'error',
            duration: 1 * 1000
            }) 
        }
        if(!this.companyAddress){
            return  Message({
            message: "请填写公司地址",
            type: 'error',
            duration: 1 * 1000
            }) 
        }
        if(!this.mobile){
            return  Message({
            message: "请填写联系电话",
            type: 'error',
            duration: 1 * 1000
            }) 
        }
        if(!this.bank){
            return  Message({
            message: "请填写开户银行",
            type: 'error',
            duration: 1 * 1000
            }) 
        }
        if(!this.account){
            return  Message({
            message: "请填写开户银行",
            type: 'error',
            duration: 1 * 1000
            }) 
        }
        if(!this.tin){
            return  Message({
                message: "请填写纳税识别码",
                type: 'error',
                duration: 1 * 1000
            }) 
        }
        if(this.invoiceOrder.length==0){
            return  Message({
                message: "请填写选择开票订单",
                type: 'error',
                duration: 1 * 1000
            }) 
        }
        let  arr =this.invoiceOrder.map(item=>{
            return item.orderId
        })
        api.invoiceMng.invoiceApply({
            "company":this.company,
            "companyAddress":this.companyAddress,
            "mobile":this.mobile,
            "bank":this.bank,
            "account":this.account, 
            "tin":this.tin,
            "orderList":arr.join(",")
        },res=>{
           this.$router.go(-1);
            return  Message({
                message: "申请成功",
                type: 'success',
                duration: 1 * 1000
            })
        })
    },
    initPage(){
      this.company="";
      this.companyAddress="";
      this.mobile="";
      this.bank="";
      this.account=""; 
      this.tin=""; 
      this.$store.commit("setCheckOrders",[])
    },
    goChoose(){
        this.$router.push("/chooseInvoice")
    }
  }
}
</script>
<style lang="less" scoped>
    .invoice-photo{
        padding: 12px 16px;
    }
    
.map-title{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
}
.invoice-photo-img{
   width: 100%;
   min-height: 50px;
   background: #ccc;
}
.invoice-order{
    display: flex;
    height: 40px;
    line-height: 40px;

}
.invoice-number{
    color: #444;
    width: 45%;
    padding-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tips{
    color: #999;
    font-size: 11px;
    margin-left: 8px;
}
.invoice-money{
    color: #999;
    width: 20%;
}
.invoice-timer{
   color: #666; 
   width: 35%;
   overflow: hidden;
}
.invoice-active{
    background: #e1e1e1;
}
.add-btn{
    width: 85%;
    margin: 40px auto;
    height: 44px;
    border-radius: 22px;
    // background: #FABE00;
    border: 1px solid #FABE00;
    color: #FABE00;
    line-height: 42px;
    text-align: center;
}
.height120{
    height: 60px;
}
.btn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
</style>